<!--表单-->
<div style="width: 50%;margin: 10px;">
  <legend style="padding: 5px;">新增视频课程
    <input class="btn btn-default pull-right" id="addVideo" value="+" type="button"></legend>
  <div class="form-group">
    <select type="text" class="form-control"
            name="clazz_id" id="clazz_id">
      <option value="0">---请先选择班级---</option>
      {{#each clazzes}}
        <option value="{{id}}">{{name}}</option>
      {{/each}}
    </select>
  </div>
</div>
<form action="/admin/video" method="post" style="width: 50%;margin: 10px;">

  <div class="form-group">
    <label>所属阶段</label>
    <select type="text" class="form-control stage_id"
            name="stage_id">
    </select>
  </div>

  <fieldset class="group">

    <legend>视频1</legend>

    <div class="form-group">
      <label>名称</label>
      <input type="text" class="form-control name"
             name="video[0][name]">
    </div>

    <div class="form-group">
      <label>时长（分钟）</label>
      <input type="number" class="form-control duration"
             name="video[0][duration]">
    </div>

    <input type="hidden" class="sort" value="0" name="video[0][sort]">
  </fieldset>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

{{#extend 'jquery'}}
  <script>

    var sort = 0;

    $('#clazz_id').change(function () {
      if (this.value != 0) {
        $.ajax({
          url: '/admin/get-stage',
          data: {clazzId: this.value},
          success: function (result) {
            if (result.success) {
              $('.stage_id').html('');
              for (var i = 0; i < result.data.length; i++) {
                var v = result.data[i];
                $('<option>').val(v.id).html(v.name + ' ' + v.title).appendTo('.stage_id');
              }
            }
          }
        })
      }
    })

    $('#addVideo').click(function () {
      var $group = $('.group:last');
      var $clone = $group.clone();
      sort++;
      $clone.find('legend').text('视频' + (sort + 1));
      $clone.find('.name').prop('name', 'video[' + sort + '][name]');
      $clone.find('.duration').prop('name', 'video[' + sort + '][duration]');
      $clone.find('.sort').prop('name', 'video[' + sort + '][sort]').val(sort);
      $group.after($clone);
    })
  </script>
{{/extend}}
